@import "../others/variables.less";
.talk-box.wrapper
{
    flex: 1 1 auto;
    overflow: hidden;
    background-color: @content-wrapper-bgc;
    position: relative;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    .message-box
    {
        overflow: auto;
        flex: 1 1 auto;
        .load-more
        {
            display: block;
            text-align: center;
            color: #409eff;
        }
        .load-more:hover
        {
            text-decoration: underline;
            cursor: pointer;
        }
    }

    .edit-box
    {
        height: 215px;
        position: relative;
        flex: 0 0 auto;
        overflow: auto;
        box-sizing: border-box;
        bottom: 0;
        .spec-file
        {
            position: absolute;
            top: 0;
            .icon
            {
                color: rgb(171, 171, 171);
                font-size: 20px;
                padding: 10px 10px;
            }
            .icon:hover
            {
                color: rgb(100, 100, 100);
            }
            .el-icon-picture{
                margin-left: 3px;
            }
        }




        .edit-text
        {
            display: block;
            box-sizing: border-box;
            font-weight: 500;
            font-family: Consolas, serif;
            padding: 45px 15px 15px 15px;
            width: 100%;
            height: 100%;
            resize: none;
            font-size: 18px;
            border: none;
            background-color: transparent;
        }
        .edit-text:focus
        {
            background-color: #fff;
            border: none;
            outline: none;
        }

        .send
        {
            position: absolute;
            right: 10px;
            bottom: 10px;
            background-color: rgb(245, 245, 245);
            color: rgb(96, 96, 96);
            border: 1px solid rgb(229, 229, 229);
            padding: 7px 13px;
        }
        .send:hover{
            //background-color: rgb(18, 150, 17);
            background-color: rgb(18, 183, 245);
            color: #ffffff;
        }
    }


    .right-bar
    {
        position: absolute;
        overflow: auto;
        padding: 10px 0 0 0;
        width: 250px;
        border: 1px solid rgb(236, 236, 236);
        background-color: #ffffff;
        right: 0;
        top: 0;
        height: 100%;
        box-sizing: border-box;
        transition: 1s all;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;

        &.hide
        {
            right: -300px;
        }


        .search-box
        {
            display: flex;
            flex: 0 0 auto;
            overflow: hidden;
            justify-content: center;
            width: 100%;
            box-sizing: border-box;
            padding: 0 10px 10px 10px;
            .search-item{
                width: 100%;
                height: 30px;
                box-sizing: border-box;
                border-radius: 5px;
                outline: none;
                //border: transparent 1px solid;
                padding: 0 10px;
                //background-color: rgb(232, 232, 232);
                //border: transparent 1px solid;
                background-color: rgb(248, 248, 248);
                border: rgb(222, 221, 220) 1px solid;
            }
            .search-item:focus{
                //background-color: rgb(248, 248, 248);
                //border: rgb(222, 221, 220) 1px solid;
                background-color: rgb(232, 232, 232);
                border: transparent 1px solid;
            }
        }

        .group-member-box{

            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
            padding: 0 10px;
            flex: 1 1;
            overflow: auto;
            //& > .wrapper:last-of-type:not(:nth-of-type(4n)) {
            //    margin-right: auto;
            //}
        }





        .option-box
        {
            display: flex;
            flex-direction: column;
            padding: 10px 10px;
            flex: 0 0 auto;
            overflow: hidden;
            .label
            {
                display: flex;
                flex-direction: column;
                position: relative;
                margin-top: 5px;
                margin-bottom: 5px;
            }
            .text
            {
                color: rgb(153, 153, 185);
            }
            .input
            {
                border: none;
                height: 25px;
                box-sizing: border-box;
                padding: 0 0px;
                outline: none;
            }
            .input:focus{
                border: none;
                outline: none;
            }
            .edit-icon
            {
                position: absolute;
                bottom: 5px;
                right: 10px;
                color: rgb(153, 153, 185);
                visibility: hidden;
            }
            .input:hover~.edit-icon{
                visibility: visible;
            }
        }

        .delete-group{
            color: #ff1122;
            flex: 0 0 auto;
            overflow: hidden;
            background-color: transparent;
            outline: none;
            box-sizing: border-box;
            border: none;
            border-top: 1px solid #999999;
            font-size: 16px;
            padding-top: 15px;
            margin-top: 5px;
            margin-bottom: 10px;
        }


    }

    //@hide-scrollbar();

}
